<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="../responsive-paginate.js"></script>
    <script>
        $(document).ready(function () {
            $.fn.generateRandomPagination = function(options)
            {
                var content = '<li class="left-etc"><a href="#">&laquo;</a></li>';
                for (var i = 1; i <= options.max_value; i++)
                {
                    if (i == options.selected_value)
                        content += '<li class="active"><span>' + i + '</span></li>';
                    else
                        content += '<li><a href="">' + i + '</a></li>';
                }
                content += '<li><a href="#">&raquo;</a></li>';
                $(this).html(content);
            }

            for (var i = 1; i <= 6; i++)
            {
                $("#tests").append('<ul class="pagination"></ul>');
                $("#tests").append("<br>");
            }

            var i = 1;
            $(".pagination").each(function(){
                $(this).generateRandomPagination({
                    max_value: 100,
                    selected_value: i
                });
                i += 19;
            });
            $(".pagination").rPage();
        });

    </script>
</head>
<body>
    <div id="tests" style="position: relative; background-color: #f5f5f5; margin: 0 auto; text-align: center; margin-top: 50px;"></div>
</body>
</html>
